@charset "utf-8";
@import "reset";
body{
    min-width: 1280px;
    background: url(../img/BG.png);
}

.web{
    width: 1064px;
    margin: 0 auto;
    background: #000000;
}
//头部
.nav{
    width: 971px;
    margin: 0 auto;
    .nav_logo{
        padding: 41px 41px 41px 0;
        float: left;
    }
    .head{
        float: right;
        .top{
            float: right;
            font-size: 12px;
       
        li{
            float: left;
            display: inline-block;
            margin: 20px 15px 18px 0;
            a{
                color: #7a7979;
            }
        }
        li:nth-child(2){
            color: #7a7979;
        }
        li a:hover{
            color: #0dafd2;
        } 
        }
        .head_nav{
            font-size: 22px;
            text-align: right;
            li{
                float: left;
                padding: 0 10px;
                > a{
                    color: white;
                    &:hover{
                        color: #0DAFD2;
                    }
                }
                &:not(:last-child){
                    &::after{
                        content: "";
                        display: inline-block;
                        height: 15px;
                        padding-right: 15px;
                        border-right: 1px solid grey;
                    }
                }
            }
        }
    }
}
//内容
.tu{
    width: 1063px;
    height: 282px;
    background:url(../img/final-1.png);
}
.t{
    width:971px;
    margin: 0 auto;
.t1{
    height:60px;
    margin-top: 38px;
    border-bottom:1px solid #4d4d4d;
    h1{
        display: inline-block;
        font-size: 33px;
        color: #0dafd2;
        span{
            font-size: 14px;
            color: #808080;
            margin-left: 10px;
        }
    }
    p{
        display: inline-block;
        float: right;
        img{
            margin-right: 10px;
        }
        a{
            font-size: 14px;
            color:#737373; 
        }
    }
}
.t2{
    margin-top: 20px;
    overflow: hidden;
    .t2left{
        display: inline-table;
        width:599px;
        p{
            font-size: 20px;
            color: #dddddd;
            line-height:30px;
            margin-top: 40px;
        }
    }
    ul{
        margin-top: 32px;
        width: 224px;
        display: inline-table;
        float: right;
        li{
           font-size: 12px;
           color: #8a8c8c; 
           margin-top: 18px;
           span{
               font-size: 12px;
               color: #0dafd2;
           }
        }
        input{
            width: 128px;
            height: 34px;
            background: #0dafd2;
            color: white;
            margin-top: 25px;
        }
        p{
            margin-top: 23px;
            a{
                margin-right:14px;
            color:#999999;
            &:hover{
                color: #ff6c8b;
            }
            }
        }
    }
}
.t3{
    margin-top: 100px;
    width:578px;
    h3{
        font-size:14px;
        color: #ff7800;
    }
    p{
        font-size: 14px;
        color: #ffffff;
        line-height: 20px;
        margin-top: 20px;
    }
}
.t4{
    margin-top: 20px;
}
.t6{
    display: inline-block;
    h5{
        font-size: 14px;
        color: #0dafd2;
    }
    div{
        display: inline-block;
       margin-top: 20px;
       margin-right: 5px;
       p{
           font-size: 12px;
           color:#717171;
       }
    }
    ul{
        display: inline-block;
        vertical-align: top;
        margin-top: 50px;
        li{   
        font-size: 14px;
        color: #088fac;
        margin-top: 15px;
        }
    }
}
.ba{
                        border-top: 1px solid #4d4d4d;
                        margin-top: 20px;
                        .ba1{
                            width: 53px;
                            height: 57px;
                            overflow: hidden;
                            display: inline-block;
                            padding-top:20px;
                            margin-bottom: 11px;
                            &:hover::after{
                             transform:scaleY(1);
                            display:inline-block;
                        }
                     &::after{
                            content:url(../img/BK-1.png)"性别:女 国籍:美籍华人 兴趣:唱k";
                            width: 200px;
                            height:100px;
                            font-size: 12px;
                            color: white;
                            background: rgba(0,0,0,7);
                            overflow: hidden;
                            position: absolute;
                            border:1px solid blue;
                            border-radius:15px;
                            background-color: gray;
                            transform:scaleY(0);
                            transition-duration:300ms;
                            transform-origin: top; 
                            z-index:3;
                            opacity: 0.8;
                        }
                        }
                        .zi{
                            display: inline-block;
                            vertical-align: top;
                            margin-top: 15px;
                            width: 479px;
                            h3{
                                vertical-align: top;
                                font-size:14px;
                                color: #4d4c4c;
                                display: inline-block;
                            }
                           h4{
                                font-size: 14px;
                                color: #666565;
                                font-weight: 100;
                                margin-top: 10px;
                            }
                        }
                    }
                     .shi{
                         width: 698px;
                    overflow: hidden;
                    margin:0 auto;
                    margin-bottom: 28px;
                    h5{
                        font-size:19px;
                        color: #067d97;
                        margin: 15px 0;
                        span{
                            margin-left: 12PX;
                        }
                    }
                    textarea{
                        display: block;
                        width:698px;
                        height:115px;
                        border: 1px solid #dbdbdb;
                        border-radius: 5px;
                    }
                    input{
                        display: block;
                        width: 82px;
                        height: 24px;
                        font-size: 14px;
                        color: white;
                        background: #0dafd2;
                        float: right;
                        margin-top:10px;
                    }
                }
}
 //底部
            .foot{
   width: 1063px;
    height: 260px;
    background: black;
    margin:0 auto;
    .foot1{
        width: 972px;
        height: 259px;
        margin:0 auto;
        border-top:1px solid #262626;
        .foot2{
            border-bottom:1px solid #929292;
            ul{
                font-size: 0px;
                li{display: inline-block;
                height: 40px;
                line-height: 40px;
                    a{
           font-size: 12px;
           color: #929292;
           &:hover{
               color: #0dafd2;
           }
           &::after{
               content: "";
               height: 10px;
               line-height: 10px;
               width: 2px;
               background: #929292;
               display: inline-block;
               margin-left:6px;
               margin-right:6px;
               margin-top: -2px;
             }
            }
            &:last-child a::after{
                display: none;
            }
        }
    }
  }
  .foot3{
      border-bottom:1px solid #929292;
      overflow: hidden;
      position: relative;
      z-index:2;
      background: black;
     .left{
         display: inline-block;
          margin-left: 73px;
      ul{
          li{
              line-height:40px;
              height:40px;
              display: inline-block;
              margin-right: 10px;
              &:nth-child(3):hover .nei{
                  width:90px;
              }
               &:nth-child(4):hover .nei{
                  width:140px;
              }
              &::before{
                  content: "";
                  width: 1px;
                  height: 17px;
                  background: white;
                  display: inline-block;
                  margin-right: 9px;
                  transform: translateY(3px);
              }
              &:nth-child(1)::before{
                  display:none;
              }
               &:nth-child(2)::before{
                  display:none;
              }
               &:nth-child(3)::before{
                  display:none;
              }
              .nei{
                  height: 40px;
                  line-height: 40px;
                  vertical-align: top;
                  font-size: 12px;
                  width: 0px;
                  display: inline-block;
                  color: white;
                  overflow: hidden;
                  transition-duration:500ms;
                  a{
                      margin-left: 10px;
                  }
              }
              a{
                  font-size: 12px;
                  color: #0dafd2;
                  vertical-align: top;
                  text-align: center;
                  span{
                      vertical-align:top;
                      margin:0 9px;
                  }
                  
                  img{
                      vertical-align:middle;
                  }
              }
          }
      }
      }
      .right{
          display: inline-block;
          float: right;
          margin-right: 68px;
          ul{
              margin-top: 10px;
              display: inline-block;
              li{
                 display: inline-block;
                 height: 20px;
                 overflow: hidden;
                 vertical-align: top;
                 transition-duration:1s; 
                 margin-left: 10px;
                 background:black;
                 &:first-of-type:hover{
                     height:80px;
                 }
                 &:hover .a{
                    color:#0a97b6;
                 }
                 &:nth-child(3):hover{
                     height:110px;
                 }
                 p{
                     font-size: 12px;
                     color: #cbcbcb;
                     margin-top:10px;
                     background:#000000;
                     &:hover a{
                         color: #0a97b6;
                     }
                 }
                 .re{
                     color:#cbcbcb;
                 }
                  a{
                      font-size: 12px;
                      color:#cbcbcb;
                      span{
                          color: #0dafd2;
                          margin-left:5px;
                      }
                  }
              }
          }
      }
  }
  .big{
      min-width: 1063px;
      height: 171px;
      position: absolute;
     top:4235px;
  .logo{
      display: inline-block;
      margin-left: 56px;
      margin-top: 40px;
      vertical-align: top;
  }
  .zho{
      display: inline-block;
      margin-left:60px;
      margin-top: 30px;
  }
  .ce{
      display: inline-block;
      vertical-align: top;
      margin-top: 35px;
      margin-left: 25px;
      h1{
          font-size: 12px;
         color: #bebebe;
         font-weight: 100;
      }
      p{
         vertical-align: top;
          a{
              font-size: 12px;
              color: #bebebe;
              letter-spacing: 5px;
              &::before{
                  content:"";
                  width: 1px;
                  height: 12px;
                  line-height: 12px;
                  background:#bebebe;
                  display: inline-block;
                  transform: translateY(2px);
                  margin-right:3px;
              }
              &:nth-child(1)::before{
                  display: none;
              }
          }
          span{
              font-size: 12px;
              color: #bebebe;
              margin: 0 3px;
          }
      }
     div{
         display: inline-block;
          width:220px;
          font-size: 12px;
          list-style: none;
          margin-top: 15px;
          color: #bebebe;
      }
  }
}
}
}